import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { Router } from "./router";
import "@arco-themes/react-awake-ai/css/arco.css";
import { QueryClient, QueryClientProvider } from "react-query";
import { Provider as JotaiProvider } from "jotai";
import ThemeComponent from "./@core/theme/ThemeComponent.tsx";
import {
  SettingsConsumer,
  SettingsProvider,
} from "./@core/context/settingsContext";


const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <JotaiProvider>
        <SettingsProvider>
          <SettingsConsumer>
            {({ settings }) => {
              return (
                <ThemeComponent settings={settings}>
                  <Router />
                </ThemeComponent>
              );
            }}
          </SettingsConsumer>
        </SettingsProvider>
      </JotaiProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);
